<template>
  <div class="cart_container">
    <van-nav-bar class="cart_nav" title="购物车" left-arrow>
      <template #left>
        <span @click="back" class="iconfont icon-fanhui"></span>
      </template>
    </van-nav-bar>
    <div class="cart_wrapper">
      <div class="cart_card" v-for="(item,index) in list" :key="index">
        <input type="checkbox" :checked="item.checked" @change="onChange(item,$event)" style="zoom: 160%;" />
        <div class="cart_cons">
          <img :src="item.carts.mainPic" alt />
          <div class="cart_cons_con">
            <p class="van-ellipsis">{{item.carts.dtitle}}</p>
            <p
              style="color:grey;font-size:.15rem;"
              class="van-multi-ellipsis--l2"
            >{{item.carts.title}}</p>
            <p class="cart_cons_price">
              <b style="color:red;">￥{{item.carts.originalPrice}}</b>
              <span class="cart_paynum">
                <span @click="min(item)">-</span>
                <span >{{item.num}}</span>
                <span @click="max(item)">+</span>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="cart_footer">
      <p>
        <input
          type="checkbox"
          @change="onChangeAll"
          :checked="this.$store.state.homeModule.allSelected"
          style="zoom: 160%;"
        />
        全选
      </p>
      <p>
        <span>总价：{{allprice.toFixed(2)}}</span>
        <button>去结算</button>
      </p>
    </div>
  </div>
</template>

<script>
import REM from "../utills/rem";
export default {
  data() {
    return {};
  },
  computed:{
      allprice:function(){
          return this.$store.state.homeModule.allprice
      },
      list:function(){
          return this.$store.state.homeModule.cart
      }
  },
  methods: {
    back() {
      window.history.back();
    },
    // 点击上面的复选框
    onChange(item,e) {
       e = e.target.checked
       item.checked = e
      this.$store.dispatch("changeItemStatus",item);
    },
    onChangeAll() {
      var checked = event.target.checked;
      this.$store.dispatch("changeAllselect", checked);
    },
    min(item) {
      this.$store.dispatch("sub", item);
    },
    max(item) {
      this.$store.dispatch("add", item);
    }
  },
  mounted() {
    REM.Rem();
    this.min(this.list)
  }
};
</script>

<style scoped>
.cart_container {
  width: 100%;
}

.cart_nav {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  border-bottom: 1px solid lightgrey;
}

.cart_wrapper {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
}

.cart_card {
  width: 95%;
  box-sizing: border-box;
  padding: 0.05rem;
  margin: 0.03rem auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid lightgrey;
}
.cart_cons {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart_cons img {
  width: 24%;
}
.cart_cons_con {
  width: 74%;
  font-size: 0.2rem;
}
.cart_cons_price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0.05rem;
}
.cart_paynum {
  box-sizing: border-box;
  padding: 0.05rem;
}
.cart_paynum span {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  font-size: 0.25rem;
  text-align: center;
  line-height: 0.35rem;
  background-color: rgb(236, 236, 236);
  margin-right: 0.05rem;
}
.cart_footer {
  width: 100%;
  height: 50px;
  border-top: 1px solid #eeeeee;
  position: fixed;
  bottom: 0px;
  left: 0px;
  font-size: 0.25rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0rem 0.1rem;
  align-items: center;
}
.cart_footer button {
  border: none;
  background-color: red;
  color: #fff;
  width: 1rem;
  height: 0.45rem;
  border-radius: 0.45rem;
  margin: 0.1rem;
}
</style>